<template>
  <div class="home">
    <div class="home-left">
      <router-link to="/" style="text-decoration: none;"><img src="../assets/shopLogo.png" alt="logo" height="100%"></router-link>     
    </div>
    <div class="home-right">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
              background-color="#F5F5F5" text-color="#030303" active-text-color="#ff0006">
        <el-menu-item index="1">个人中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">商家服务</template>
          <el-menu-item index="2-1">平台简介</el-menu-item>
          <el-menu-item index="2-2">营销中心</el-menu-item>
          <el-menu-item index="2-3">商务合作</el-menu-item>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">
          <router-link to="/order" style="text-decoration: none;">订单管理</router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <router-link to="/login" style="text-decoration: none;">登录</router-link>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  name: "Navigation",
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.home{
  width: 100%;
}
.home-left{
  float: left;
  height: 60px;
  width: 40%;
  background-color:#F5F5F5;
}
.home-right{
  width: 60%;
  float: right;
}
</style>